<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%-- 
    JSP Name : jspName.jsp
    Description : 설명을 기술합니다.
    author jkKim
    since 2012. 5. 10.
    version 1.0
    Modification Information
       since          author              description
    ===========    =============    ===========================
    2012. 5. 10.     jkKim     최초 생성
--%>
<%@ include file="/WEB-INF/jsp/com/include/declare.jspf" %>
<%@ include file="/WEB-INF/jsp/com/include/doctype.jspf" %>
    <meta name="WT.ti" content="홈_차종_<c:out value='${dspMgmtVO.dspNm}'/>_메인">
    <script type="text/javascript" src="/kr/common/js/360vr/jquery.reel.js"></script>
    <script type="text/javascript" src="/kr/common/js/360vr/jquery.disabletextselect-min.js"></script>
    <script type="text/javascript" src="/kr/common/js/360vr/jquery.mousewheel-min.js"></script>
    <script type="text/javascript" src="/kr/common/js/showroom.js"></script>
    <script type="text/javascript" src="/kr/common/js/showroom2.js"></script>
    <script type="text/javascript" src="/kr/common/js/trimcompare.js"></script>
<SCRIPT type=text/javascript charset=UTF-8    src="/kr/common/js/netfunnel-debug.js"></SCRIPT>
    
    
    
    <script>
    function showChaildView(id, seq, iconYn, dspMenuNm, dspCtgrSn){
        if($.trim($("#"+id).html()).length != 0){
            return;   
        }   
        $.ajax({
            type: "POST",
            dataType : "text",
            url: "<c:url value='/childView.do'/>",
            data: {
                'dspCtgrSn' : seq,
                'iconYn' : iconYn
            },
            success: function(data){
                if(data){
                    $("#"+id).html('');   
                    $("#"+id).append(data);
                    setContentsImg(id, "${httpDomain}", dspMenuNm, dspCtgrSn);
                }  
            }
         });        
    } 
    
    var event = false;
    function showEventView(id){
        var carCd1 = $('#carCd1').val();
        var carCd2 = $('#carCd2').val();
        $.ajax({
            type: "POST",
            dataType : "text",
            url: "<c:url value='/dsp/selectEvntMnList.do'/>",
            data: {
                'carCd1' : carCd1,
                'carCd2' : carCd1+carCd2
            },
            success: function(data){
                if(data){
                    $("#"+id).html('');   
                    $("#"+id).append(data);
                }  
            }
         });        
    } 
    function showroomPrint(o) {
        var Parea = $(o).parent().parent().parent().parent().attr('id');
        $('#'+Parea).printArea({mode: 'popup', popupClose: false});
  
        return false;
    }
    
    var vrCarObj = [];
    var vrCarObj2 = [];
    function vrCar(carPath, imgframe, ext, id, frame, pot, re){  
        if(!imgframe){
            imgframe=1;
        }
        if(!id){
            id="vr-car";
        }
        if(imgframe != 0){
            vrCarObj[id]=imgframe;
        }else{
            imgframe = vrCarObj[id];
        }
        if(!frame){ 
           frame=60;
        }
        var carImgArray=[];
        
       if(pot && pot=="left"){
           for(var i=frame; i>0; i=i-imgframe) {
               var imgPath = i+"";
               if(imgPath.length == 1){
                   imgPath = "0000"+imgPath;
               }else if(imgPath.length == 2){
                   imgPath = "000"+imgPath;
               }else if(imgPath.length == 3){
                   imgPath = "00"+imgPath;
               }else if(imgPath.length == 4){
                   imgPath = "0"+imgPath;
               }
               imgPath+="."+ext;
               carImgArray.push(imgPath);
           }
       }else{
           for(var i=1; i<=frame; i=i+imgframe) {
               var imgPath = i+"";
               if(imgPath.length == 1){
                   imgPath = "0000"+imgPath;
               }else if(imgPath.length == 2){
                   imgPath = "000"+imgPath;
               }else if(imgPath.length == 3){
                   imgPath = "00"+imgPath;
               }else if(imgPath.length == 4){
                   imgPath = "0"+imgPath;
               }
               imgPath+="."+ext;
               carImgArray.push(imgPath);
           }  
       }
       $('#' + id).width("880").height("415");
       /*
       if(re){
           $('#' + id).attr('src', '/kr/images/common/880_415_loader.gif');
           $('#' + id).reel({
               cw : false,
               frame : 1,
               speed : 0,
               path : carPath,
               images : carImgArray
           });
           if(vrCarObj2[id]){
               vrCarObj2[id] = "";
           }
       }else{
           $('#' + id).click(function() {
               $('#' + id).attr('src', '/kr/images/common/880_415_loader.gif');
               $('#' + id).reel({
                   cw : false,
                   frame : 1,
                   speed : 0,
                   path : carPath,
                   images : carImgArray
               });
               if(vrCarObj2[id]){
                   vrCarObj2[id] = "";
               }
           });
           vrCarObj2[id] = {
               'carPath' : carPath,
               'imgframe' : imgframe,
               'id' : id,
               'ext' : ext,
               'frame' : frame,
               'pot' : pot
           };
       }
       */
       $('#' + id).reel({
           cw : false,
           frame : 1,
           speed : 0,
           path : carPath,
           images : carImgArray
       });
    }
      
    function vrPathChange(o, path, id){ 
        if(!id){
            id="vr-car";
        }
        
        //if(vrCarObj2[id]) {
        ///    var taget = vrCarObj2[id];
        //    vrCar(path, taget.imgframe, taget.ext, id, taget.frame, taget.pot,"true");
        //} else {
            var imgPath = $('#' + id).attr("src");
            var frame = imgPath.substring(imgPath.lastIndexOf("/"), imgPath.length);
            $('.vr-path-change').parent().each(function(idx) {
                $(this).attr('_idx', idx);  
            }); 
            //$('#' + id).find('.jquery-reel').eq($(o).parent().attr('_idx')).data('Toverlay').fnchg(path, frame);
            if($('.jquery-reel').size() == 1 && $(o).parent().attr('_idx') == 1){
                $('.jquery-reel').eq(0).data('Toverlay').fnchg(path, frame);
            }else{
                $('.jquery-reel').eq($(o).parent().attr('_idx')).data('Toverlay').fnchg(path, frame);
            }
        //} 
    }  
    
    function setContentsImg(id, http, dspMenuNm, dspCtgrSn){
        if($("#"+id).find("img").attr("src")){
            if($("#"+id).find("img").attr("src").indexOf("kr")> 0) {
                $("#"+id).find(".snml_type2").find(".snml_img").html(http+$("#"+id).find("img").attr("src"));
            }else{
                $("#"+id).find(".snml_type2").find(".snml_img").html(http+"kr/"+$("#"+id).find("img").attr("src"));
            }
        }
        var car_name = $("#car_name").val();
        $("#"+id).find(".snml_type2").find(".snml_title").html(car_name+" "+dspMenuNm+" 을(를) %nick님이 관심있어 합니다.");
        $("#"+id).find(".snml_type2").find(".snml_description").html($('#showroom_description').val());
        var link = location.href;
        var lastNum = link.lastIndexOf("#");
        if(lastNum > 0){
            test = link.substring(0, lastNum)+"#showroom-cont-"+dspCtgrSn;
            $("#"+id).find(".snml_type2").find(".snml_URL").html(link.substring(0, lastNum)+"#showroom-cont-"+dspCtgrSn);
        }else{
            $("#"+id).find(".snml_type2").find(".snml_URL").html(link+"#showroom-cont-"+dspCtgrSn);
        }
    }
    
    function changeImg(o, imgPath){
        $(o).attr("src", imgPath);
    }
    $(document).ready(function() {
       // NetFunnel_goComplete({"port" : "${port}","proto" : "${proto}", cookie_id:"${cookieNm}"});
        $('#showroom-navigation').showroomNavicontrol();
        $('#showroom-container').showroomContentscontrol();
        
        $('.showroom-contents').each(function(){
            var that = this;
            var imgSrc1 = $(this).find('img').eq(0);
            var imgSrc2 = $(this).find('img').eq(1);
           $(that).find(".contents_control").click(function(){
               if($(this).hasClass("close-child")){
                   $(this).removeClass('close-child');
                   $(this).addClass('open-child'); 
                   
                   $(that).find(".showroom-contents-child").show();
                   imgSrc1.hide();
                   imgSrc2.show();  
                   
               }else{
                   $(this).removeClass('open-child');
                   $(this).addClass('close-child');
                   $(that).find(".showroom-contents-child").hide();
                   imgSrc2.hide();
                   imgSrc1.show();   
               } 
           });        
        });
        
        $('.popupOpen').fullsizePopup();        
        $('.showroom-storybook').storyControl();
        
        
        $("#snml").find(".snml_description").html($('#showroom_description').val());
        $("#snml").find(".snml_URL").html(location.href);
        
        var us = navigator.userAgent;
        
        if(us.indexOf("iPhone")> 0) {
            $('#quick').hide();
        } else if(us.indexOf("iPad")> 0) {  // iPad
            $('#quick').hide();
        } else if(us.indexOf("Android")> 0) {
            $('#quick').hide();
        } else {
            $('#quick').show();            
        }   
    });
    
    </script>
</head> 
<c:if test="${dspMgmtVO.cotnLnSttg == '1'}">
    <body id="typeB" style="background:url('<c:url value="${dspMgmtVO.lwpSurrImgPath}"/>') repeat;">
</c:if>
<c:if test="${dspMgmtVO.cotnLnSttg != '1'}">
    <body id="typeA" style="background:url('<c:url value="${dspMgmtVO.lwpSurrImgPath}"/>') repeat;">
</c:if>
<c:if test="${userInfo.mbrSn == null}">
    <script type="text/javascript" charset="utf-8" src="${snsHttpDomain}/sns/pub?type=2&padeCode=${menuCode }&js=1&uKey="></script>
    <script type="text/javascript" charset="utf-8" src="${snsHttpDomain}/sns/poll?type=6&pageCode=${menuCode }&js=1&uKey="></script>
</c:if>
<c:if test="${userInfo.mbrSn != null}">
    <script type="text/javascript" charset="utf-8" src="${snsHttpDomain}/sns/pub?type=2&padeCode=${menuCode }&js=1&uKey=${fnc:encryptCb(userInfo.mbrSn) }"></script>
    <script type="text/javascript" charset="utf-8" src="${snsHttpDomain}/sns/poll?type=6&pageCode=${menuCode }&js=1&uKey=${fnc:encryptCb(userInfo.mbrSn) }"></script>
</c:if>
<div id='cartrimx' class='layerpopup cartrim'><div class='layerpopup-inner'>
<div class='layerpopup-head'><h1><img src='/kr/images/layerpopup/h1_trim.gif' alt='등급별 주요 품목 비교' /></h1></div>
<div class='layerpopup-contents'><div class='car-trim-wrap'><p class='car-name'></p>
<div class='btnarea'><button class='next'><img src='/kr/images/layerpopup/btn_next.gif' alt='다음' /></button><button class='prev'><img src='/kr/images/layerpopup/btn_prev.gif' alt='이전' /></button></div>
<div class='trim-data-cutter'><div class='trim-data'></div></div>
<ul class='trim-tip'><li>* 본 비교표는 오류가 있을 수 있으니, 구입시 반드시 지점/대리점에 확인 하시길 바랍니다.</li><li>* 본 비교표와 인쇄물 상에 표기된 사양이름이 서로 다를 수 있습니다.</li><li>* 수시로 최신정보를 갱신하고 있으나 간혹 변경이 늦어지는 경우도 있으므로 최종 정보는 가격표로 확인하시기 바랍니다.</li></ul>
</div></div><div class='close-area'><div class='close-area-inner'><img src='/kr/images/layerpopup/btn_close.gif' alt='닫기' class='close' /></div></div></div></div>
<div id="wrap" class="showroom-wrap">
<c:if test="${dspMgmtVO.surrSttg == '1'}">
    <%@ include file="/WEB-INF/jsp/com/include/navi_utill.jspf" %>
</c:if>
<c:if test="${dspMgmtVO.surrSttg == '2'}">
    <%@ include file="/WEB-INF/jsp/com/include/navi_utill_sub.jspf" %>
</c:if>
    <%@ include file="/WEB-INF/jsp/com/include/navi_header.jspf" %>
    <hr />

    <!-- visual 관리영역 --> 
    ${mnSbc}
    <!-- //visual 관리영역 -->
    <hr />
    <div id="snml" style="display:none">
      <div class="snml_comment">userTxt</div>
      <div class="snml_title"><c:out value='${dspMgmtVO.dspNm}'/>을(를)%nick님이 좋아 합니다.</div>
      <div class="snml_URL"></div>
      <div class="snml_img">${httpDomain }<c:url value="${dspMgmtVO.carImgPath}"/></div>
      <div class="snml_caption"></div>
      <div class="snml_description"></div>
    </div>
    <input type="hidden" id="car_name" name="car_name" value="<c:out value='${dspMgmtVO.dspNm}'/>" />
    <input type="hidden" id="car_name_eng" name="car_name_eng" value="<c:out value='${dspMgmtVO.dspNmEn}'/>" />
    <input type="hidden" id="car_code" name="car_code" value="${dspMgmtVO.carCd1}${dspMgmtVO.carCd2}" />
    <input type="hidden" id="pagePosion" name="pagePosion" value="${pagePosion}" />
    <input type="hidden" id="pceDocDnlFilSn" name="pceDocDnlFilSn" value="${dspMgmtVO.pceDocDnlFilSn}" />
    <input type="hidden" id="sptrPceDocDnlFilSn" name="sptrPceDocDnlFilSn" value="${dspMgmtVO.sptrPceDocDnlFilSn}" />
    <input type="hidden" id="carCd1" name="carCd1" value="${dspMgmtVO.carCd1}" />
    <input type="hidden" id="carCd2" name="carCd2" value="${dspMgmtVO.carCd2}" />
    <input type="hidden" id="uKey" name="uKey" value="${fnc:encryptCb(userInfo.mbrSn) }" />
      
    
    <div id="showroom-container">
        <!-- showroom-navigation -->
        <div id="showroom-navigation-wrap">
            <c:if test="${dspMgmtVO.cotnLnSttg == '2' && dspMgmtVO.fSurrImgPath != null && dspMgmtVO.fSurrImgPath != ''}">
                <div id="showroom-navigation" style="background:url('<c:url value="${dspMgmtVO.fSurrImgPath}"/>') repeat-x;"> 
            </c:if>
            <c:if test="${dspMgmtVO.cotnLnSttg == '1' || dspMgmtVO.fSurrImgPath == null || dspMgmtVO.fSurrImgPath == ''}">
                <div id="showroom-navigation">
            </c:if>
                <div class="showroom-navigation-inner" style="background:url('<c:url value="${dspMgmtVO.ctrSurrImgPath}"/>') repeat-x;">
                    <div class="carbrand-area">
                        <h2><a href="#"><img src="<c:url value="${dspMgmtVO.carImgPath}"/>" alt="${dspMgmtVO.dspNm}" /></a></h2>
                        <ul class="carbrand-menu">
                            <li class="favorite">
                                <c:if test="${userInfo.mbrSn == null}">
                                    <script type="text/javascript" charset="utf-8" src="${snsHttpDomain}/sns/pub?type=1&pageCode=${menuCode }&js=1&imgURL=<c:url value="${dspMgmtVO.rcmImgPath}"/>&uKey="></script>
                                </c:if>
                                <c:if test="${userInfo.mbrSn != null}">
                                    <script type="text/javascript" charset="utf-8" src="${snsHttpDomain}/sns/pub?type=1&pageCode=${menuCode }&js=1&imgURL=<c:url value="${dspMgmtVO.rcmImgPath}"/>&uKey=${fnc:encryptCb(userInfo.mbrSn) }"></script>
                                </c:if>
                            </li>
                            <c:if test="${dspMgmtVO.virExprExpsYn == 'Y'}">
                                <li><a href="javascript:virExprExps('${dspMgmtVO.virExprPath}')" onclick="dcsMultiTrack('DCS.dcssip','www.hyundai.com','DCS.dcsurl','/kr/estimation/selectEstComCarTColor.do','WT.ti','홈_견적_<c:out value='${dspMgmtVO.dspNm}'/>_가상체험');"><img src="/kr/images/showroom/menu_carbrand01.png" alt="가상체험" /></a></li>
                            </c:if>
                            <c:if test="${dspMgmtVO.brndStyExpsYn == 'Y'}">
                                <li><a href="javascript:storybook('<c:url value="/storybook.do"/>')"><img src="/kr/images/showroom/menu_carbrand02.png" alt="스토리 북" /></a></li>
                            </c:if>
                            <c:if test="${dspMgmtVO.tuixExpsYn == 'Y'}">
                                <li><a href="javascript:tuix('<c:url value="/tuix.do"/>')"><img src="/kr/images/showroom/menu_carbrand03.png" alt="TUIX" /></a></li>
                            </c:if>
                            <c:if test="${dspMgmtVO.ncapExpsYn == 'Y'}">
                                <li><a href="javascript:kncap('<c:url value="/kncap.do"/>')"><img src="/kr/images/showroom/menu_carbrand04.png" alt="KNCAP" /></a></li>
                            </c:if>
                        </ul>
                    </div>
                    <ul class="carspec-area">
                        <c:forEach var="result" items="${dspCtgrVOList}" varStatus="status">
                            <li><a href="#showroom-cont-${result.dspCtgrSn}"><img src="<c:url value="${result.menuImgPath}"/>" alt="${result.dspMenuNm}" /></a></li>
                        </c:forEach>
                    </ul>
                    <%@ include file="/WEB-INF/jsp/com/include/quickmenu.jspf" %>
                </div>
            </div>
        </div>
        <!-- showroom style -->
        <c:forEach var="result" items="${dspCtgrVOList}" varStatus="status">
            <div class="showroom-contents" id="showroom-cont-${result.dspCtgrSn}">
                <div class="showroom-contents-inner">
                    <h3> 
                        <c:if test="${result.expsSt == 'Y'}">  
                            <img src="<c:url value="${result.titlImgOffPath}"/>" alt="${result.dspMenuNm}"  style="display:none"/>
                            <img src="<c:url value="${result.titlImgOnPath}"/>" alt="${result.dspMenuNm}"/>
                            
                        </c:if>
                        <c:if test="${result.expsSt == 'N'}">
                            <img src="<c:url value="${result.titlImgOffPath}"/>" alt="${result.dspMenuNm}" />
                            <img src="<c:url value="${result.titlImgOnPath}"/>" alt="${result.dspMenuNm}"  style="display:none"/>
                        </c:if> 
                    </h3>
                    <c:if test="${result.expsSt == 'Y'}">  
                        <button class="contents_control open-child" onclick="showChaildView('contents${result.dspCtgrSn}', '${result.dspCtgrSn}');">펼쳐보기</button>
                    </c:if> 
                    <c:if test="${result.expsSt == 'N'}">
                        <button class="contents_control close-child" onclick="showChaildView('contents${result.dspCtgrSn}', '${result.dspCtgrSn}');">펼쳐보기</button>
                    </c:if>
                    <c:if test="${result.expsSt == 'Y'}">  
                        <div class="showroom-contents-child open-child" id="contents${result.dspCtgrSn}">
                    </c:if>
                    <c:if test="${result.expsSt == 'N'}">
                        <div class="showroom-contents-child close-child" id="contents${result.dspCtgrSn}" style="display: none; ">
                    </c:if>
                    </div> 
                </div>
            </div>
            <c:if test="${result.expsSt == 'Y'}">
                <script>showChaildView('contents${result.dspCtgrSn}', '${result.dspCtgrSn}','${result.iconYn}','${result.dspMenuNm}','${result.dspCtgrSn}');</script>
            </c:if>
        </c:forEach>        
        <!-- //showroom style -->
    </div>
    <hr />    
    
    <%@ include file="/WEB-INF/jsp/com/include/footer.jspf" %>
        
     